<style lang="scss" module>
  .me {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 5px;
  }
  .title {
    font-size: 25px;
    font-weight: 300;
  }
  .wrapStyle {
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 14px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    color: #515a6e;
    background-color: #fff;
    background-image: none;
    position: relative;
    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
  }
</style>
<template>
  <div :class="$style.me">
    <Form v-if="show" ref="_frm" :model="cloneData"  :rules="ruleValidate"  :disabled="form.disabled"
          :label-width="form.labelWidth"
          :style="{overflow:'auto',padding:'5px',border:'0px solid #dcdee2',...formStyle}">
      <Row v-for="(colList,index) in fieldsList" :key="index">
        <Col v-for="(field,k) in colList" :key="k" :span="span" :style="{padding:'0 5px'}">
          <FormItem :label="field.label" :prop="field.dataIndex" :style="{marginBottom:form.interval+'px',width:itemWidth}">
            <fieldCell :config="field" v-model="cloneData[field.dataIndex]" :localOptions="localOptions"
            @link="openLink"></fieldCell>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
export default {
  name:'cfg-instance-form',
  model:{
    prop:'data',
    event:'submit'
  },
  data() {
    return {
      ruleValidate:{},
      cloneData: {},
      show:true,
    }
  },
  props: {
    data:{default:()=>{
      return {}
    }},
    fields:{
      default:()=>{
        return [];
      }
    },
    localOptions:{
      default:()=>{
        return [];
      }
    },
    titleStyle:{
      default:()=>{
        return {};
      }
    },
    formStyle:{
      default:()=>{
        return {};
      }
    },
    form:{
      default:()=> {
        return {
          title:null,
          labelWidth:160,
          interval:24,
          itemWidth:null,
          itemAlign:true,
          col:2,
          disabled:false,
          submit:'submit',
          confirmPrompt:'confirmPrompt',
          cancel:'cancel'
        }
      }
    },
  },
  computed: {
    myFormStyle(){
      return Object.assign({overflow:'auto',padding:'5px',border:'0px solid #dcdee2'},this.formStyle)
    },
    col(){
      return this.tools.lodash.isInteger(this.form.col)&&this.form.col>0?this.form.col:1;
    },
    span(){
      return parseInt(24/this.col);
    },
    itemWidth(){
      return !!this.form.itemWidth&&this.form.itemWidth!='auto'?this.form.itemWidth+'px':'auto';
    },
    fieldsList(){
      return this.tools.lodash.chunk(this.fields.filter(item=>!!item.show),this.col);
    }
  },
  mounted() {
    this.cloneData=this.tools.lodash.cloneDeep(this.data);
    this.getRuleValidate();
  },
  watch:{
    form:function(form){
      this.getRuleValidate();
    },
    fields:function(){
      this.getRuleValidate();
    },
    data:function(newData){
      this.cloneData=this.tools.lodash.cloneDeep(newData);
    }
  },
  methods: {
    refresh() {
      this.$forceUpdate();
    },
    getRuleValidate(){
      let rule={};
      this.fields.map(field=>{
        rule[field.dataIndex]=[
          {
            required:!!field.required?field.required:false,
            type:!!field.validate?field.validate:'any',
            message:this.$i18n.locale==='en'?(!!field.messageEN?field.messageEN:'wrong value'):(!!field.messageCN?field.messageCN:'输入错误'), trigger: 'change' },
        ];
      });
      this.ruleValidate=rule;
    },
    submit(){
      this.$refs._frm.validate((valid) => {
        if (valid) {
          this.$emit('submit',this.cloneData);
        } else {
          this.$Message.error(this.$i18n.locale==='en'?'validate does not pass!':'验证未通过！');
        }
      })
    },
    cancel(){
      // this.newForm=false;
      this.cloneData=this.tools.lodash.cloneDeep(this.data);
      this.$emit('cancel');
    },
    getData(){
      return this.cloneData;
    },
    openLink(key,value){
      this.$emit('openLink',key,value);
    }
  }
}
</script>

